<template>
    <div class="home">
      <particles-bg type="random" :bg="true" />
        <banner isHome="true"></banner>
        <div class="site-content animate">
            <!--通知栏-->
           <div class="notify">
                <div class="search-result" v-if="hideSlogan">
                    <span v-if="searchWords">搜索结果："{{searchWords}}" 相关文章</span>
                    <span v-else-if="category">分类 "{{category}}" 相关文章</span>
                </div>
                <quote v-else>{{notice}}</quote>
            </div>

            <!--是否展示用户注册-->
            <register v-show="isRegister"></register>

            <!--焦点图-->
            <div class="top-feature" v-if="!hideSlogan">
                <section-title>
                    <div style="display: flex;align-items: flex-end;">聚焦<small-ico></small-ico></div>
                </section-title>
                <div class="feature-content">
                    <div class="feature-item">
                        <Feature></Feature>
                    </div>
                </div>
            </div>
            <!--关注我们-->
            <FollowUs style="width: 350px;margin-left: 680px;position: absolute;margin-top: 130px"></FollowUs>
            <!--标签云-->
            <TagCloud style="width: 350px;margin-left: 700px;position: absolute;margin-top: 620px"></TagCloud>
            <!--三级推荐-->
            <ThirdRecommend style="width: 350px;margin-left: 680px;position: absolute;margin-top: 1000px"></ThirdRecommend>
            <!--文章列表-->
            <div>
              <main  class="site-main">
                  <section-title>推荐</section-title>
                      <post></post>
              </main>
            </div>

            <!--加载更多-->
            <div class="more" v-show="!isShow">
                <div class="more-btn" @click="loadMore">More</div>
            </div>

          <!--底线-->
          <div style="margin-top: 50px;margin-bottom: 50px" v-show="isShow">
            <el-divider><i class="el-icon-sunny" style="margin-right: 15px"></i>我也是有底线的哦~<i class="el-icon-sunny" style="margin-left: 15px"></i></el-divider>
          </div>

        </div>

    </div>
</template>

<script>
    import Banner from '@/components/banner'
    import Feature from '@/components/feature'
    import sectionTitle from '@/components/section-title'
    import Post from '@/components/post'
    import SmallIco from '@/components/small-ico'
    import Quote from '@/components/quote'
		import FollowUs from "../components/FollowUs";
		import TagCloud from "../components/TagCloud"
		import ThirdRecommend from "../components/ThirdRecommend";
		import Utils from '../assets/js/util.js';
		import underUtil from '../assets/js/underUtil'
		import { ParticlesBg } from '../components/particles-bg'
		import Register from "./register";


    export default {
        name: 'Home',
        props: ['cate', 'words'],
        data() {
            return {
                features: [],
                postList: [],
                currPage: 1,
                isShow: false,
                isRegister: false
            }
        },
        components: {
					Register,
            Banner,
            Feature,
            sectionTitle,
            Post,
            SmallIco,
            Quote,
					  TagCloud,
					  FollowUs,
					  ThirdRecommend,
					  ParticlesBg
        },
        computed: {
            searchWords() {
                return this.$route.params.words
            },
            category() {
                return this.$route.params.cate
            },
            hideSlogan() {
                return this.category || this.searchWords
            },
            notice() {
                return this.$store.getters.notice
            }
        },
        methods: {
            loadMore() {
								Utils.$emit('loadMore', 5)
            },
            underLine(isShow) {
							var vm = this
              vm.isShow = isShow
            },
            initialization() {
						this.$notify({
							title: '公告',
							message: '此版本为简易版本,很多功能尚未完善,博客数量也较少,博客内容也相对不完善,时间仓促,为应付相关比赛,后期将不断完善,望见谅!',
							type: 'warning',
							offset: 200,
							duration: 0
						});
					},
        },
        mounted() {
					var vm = this
					underUtil.$on('underline', function (isShow) {
						vm.underLine(isShow)
					})
        },
        created() {
					this.isRegister = this.$route.params.isRegister;
					this.initialization();
        }
    }
</script>
<style scoped lang="less">

    .site-content {
        .notify {
            margin: 60px 0;
            border-radius: 3px;
            & > div {
                padding: 20px;
            }
        }


        .search-result {
            padding: 15px 20px;
            text-align: center;
            font-size: 20px;
            font-weight: 400;
            border: 1px dashed #ddd;
            color: #303133;
        }
    }

    .top-feature {
        width: 100%;
        height: auto;
        margin-top: 30px;

        .feature-content {
            margin-top: 10px;
            display: flex;
            justify-content: space-between;
            position: relative;

            .feature-item {
                width: 32.9%;
            }
        }
    }

    .site-main {
        padding-top: 80px;

        &.search {
            padding-top: 0;
        }
    }

    .more{
        margin: 50px 0;
        .more-btn{
            width: 100px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            color: #ADADAD;
            border: 1px solid #ADADAD;
            border-radius: 20px;
            margin: 0 auto;
            cursor: pointer;
            &:hover{
                color: #8fd0cc;
                border: 1px dashed #8fd0cc;
            }
        }
    }

    /******/
    @media (max-width: 800px) {
        .top-feature {
            display: none;
        }

        .site-main {
            padding-top: 40px;
        }

        .site-content {
            .notify {
                margin: 30px 0 0 0;
            }

            .search-result {
                margin-bottom: 20px;
                font-size: 16px;
            }
        }
    }

    /******/
</style>
